<template>
  <div id="left2"></div>
</template>
<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      // 1.创建数据
      const data = [
        { name: "未绑定", value: 24, error: 6 },
        { name: "已完成", value: 46, error: 10 },
        { name: "监测中", value: 122, error: 5 },
      ];
      data.forEach((obj) => {
        obj.range = [obj.value - obj.error, obj.value + obj.error];
      });
      // 2.创建图表，配置配置项
      const chart = new Chart({
        container: "left2",
        autoFit: true,
        height: 140,
      });
      chart.legend(false);
      chart.data(data);
      chart.scale({
        value: {
          min: 0,
          max: 150,
        },
        range: {
          min: 0,
          max: 150,
        },
      });

      chart.tooltip({
        showMarkers: false,
      });

      chart.interval().position("name*value").color("name").style({
        fillOpacity: 0.7,
      });

      chart
        .interval()
        .position("name*range")
        .color("name")
        .size(40)
        .shape("tick");

      chart.interaction("active-region");
      // 3.页面渲染
      chart.render();
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>